// import QtQuick 2.0
// import CustomPlot 1.0

// Item {
//     id: plotForm

//     MarketCustomPlotItem {
//         id: customPlot
//         anchors.fill: parent

//         Component.onCompleted: initCustomPlot()
//     }
// }

// 老版本
// import QtQuick 2.15
// import QtQuick.Controls.Material 2.15
// import QtQuick.Controls 2.15
// import QtQuick.Layouts 1.15
// import Qt.labs.qmlmodels 1.0

// Qt6.8
import QtQuick
import QtQuick.Controls.Material
import QtQuick.Controls
// import QtQuick.Layouts
import Qt.labs.qmlmodels
import QtQml.Models
import CustomPlot

Item {
    MarketCustomPlotItem {
        id: customPlot
        // anchors.fill: parent
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width * 0.5

        Component.onCompleted: initCustomPlot()
    }

    //表头数据放TableModelColumn里，内容数据放rows里，由TableModel统一管理
    TableModel
    {
        id: tablemodel_2
        TableModelColumn { display: "状态" }  //后面表头会用到
        TableModelColumn { display: "简称" }
        TableModelColumn { display: "售价" }
        TableModelColumn { display: "库存" }

        rows:   //表格里具体显示的内容
                [
            {
                "状态": true,
                "简称": "AK-74自动步枪",
                "售价": 149,
                "库存": 500
            },

            {
                "状态": true,
                "简称": "81式自动步枪",
                "售价": 199,
                "库存": 300
            },

            {
                "状态": true,
                "简称": "M16突击步枪",
                "售价": 119,
                "库存": 100
            },

            {
                "状态": true,
                "简称": "SCAR突击步枪",
                "售价": 129,
                "库存": 100
            },

            {
                "状态": true,
                "简称": "HKG36突击步枪",
                "售价": 159,
                "库存": 100
            }
        ]
    }

    TableView {
        id: t_tableView_2
        anchors.left: customPlot.right
        anchors.right: parent.right
        // anchors.top: parent.top
        anchors.bottom: parent.bottom

        // width: contentWidth
        // height: contentHeight

        anchors.top: horizontalHeaderView.bottom

        // interactive: false  //禁止拖动
        rowSpacing: 1       //行间距。列间距是columnSpacing

        property int hoverRow: -1

        model: tablemodel_2

        //行选择，选中事件的处理
        selectionModel: ItemSelectionModel {}

        //指定可编辑的列，把CheckBox控件放进表格中
        delegate: DelegateChooser {
            DelegateChoice {
                column: 0   //指定哪一列可编辑

                delegate: Rectangle {
                    implicitWidth: 150
                    implicitHeight: 40
                    border.width: 1
                    border.color: "#FFFFFF"
                    // color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( row % 2 === 0 ? "#FFFFFF" : "#EEEEEE")
                    color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( t_tableView_2.hoverRow === row ? "#CCCCCC" : (row % 2 === 0 ? "#FFFFFF" : "#EEEEEE"))

                    CheckBox {
                        anchors.centerIn: parent

                        checked: model.display  //CheckBox的默认状态就是模型里的值
                        onToggled: model.display = checked  //编辑即更新数据到模型

                        Material.accent: "green"
                    }
                    // MouseArea {
                    //     anchors.fill: parent
                    //     hoverEnabled: true
                    //     onPositionChanged: {
                    //         t_tableView_2.hoverRow = row;
                    //         console.log('hoverRow: ', t_tableView_2.hoverRow, ", row: ", row);
                    //     }
                    // }
                }
            }

            DelegateChoice {
                column: 2

                delegate: Rectangle {
                    implicitWidth: 150
                    implicitHeight: 40
                    border.width: 1
                    border.color: "#FFFFFF"
                    // color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( row % 2 === 0 ? "#FFFFFF" : "#EEEEEE")
                    color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( t_tableView_2.hoverRow === row ? "#CCCCCC" : (row % 2 === 0 ? "#FFFFFF" : "#EEEEEE"))

                    // BasicTextField
                    TextField {
                        anchors.centerIn: parent

                        width: 80; height: 40

                        text: model.display

                        onAccepted: model.display = text            //回车更新数据
                        onEditingFinished: model.display = text     //焦点改变更新数据
                    }
                    // MouseArea {
                    //     anchors.fill: parent
                    //     hoverEnabled: true
                    //     onPositionChanged: {
                    //         t_tableView_2.hoverRow = row;
                    //         console.log('hoverRow: ', t_tableView_2.hoverRow, ", row: ", row);
                    //     }
                    // }
                }
            }

            DelegateChoice {
                column: 3

                delegate: Rectangle {
                    implicitWidth: 150; implicitHeight: 40
                    border.width: 1
                    border.color: "#FFFFFF"
                    // color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( row % 2 === 0 ? "#FFFFFF" : "#EEEEEE")
                    color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( t_tableView_2.hoverRow === row ? "#CCCCCC" : (row % 2 === 0 ? "#FFFFFF" : "#EEEEEE"))

                    TextField {
                        anchors.centerIn: parent

                        width: 80; height: 40

                        text: model.display

                        onAccepted: model.display = text            //回车更新数据
                        onEditingFinished: model.display = text     //焦点改变更新数据
                    }
                    // MouseArea {
                    //     anchors.fill: parent
                    //     hoverEnabled: true
                    //     onPositionChanged: {
                    //         t_tableView_2.hoverRow = row;
                    //         console.log('hoverRow: ', t_tableView_2.hoverRow, ", row: ", row);
                    //     }
                    // }
                }
            }

            DelegateChoice   //默认显示方式，不指定具体列
            {
                delegate: Rectangle {
                    implicitWidth: 150; implicitHeight: 40
                    //选中行变色(生效前提是：为selectionModel分配一个ItemSelectionModel)
                    border.width: 1
                    border.color: "#FFFFFF"
                    // color: t_tableView_2.currentRow === row ? "#C8E5B3" : (row % 2 === 0 ? "#FFFFFF" : "#EEEEEE")
                    color: t_tableView_2.currentRow === row ? "#C8E5B3" : ( t_tableView_2.hoverRow === row ? "#CCCCCC" : (row % 2 === 0 ? "#FFFFFF" : "#EEEEEE") )

                    Text {
                        text: display
                        anchors.centerIn: parent
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onPositionChanged: {
                                t_tableView_2.hoverRow = row;
                                console.log('hoverRow: ', t_tableView_2.hoverRow, ", row: ", row);
                            }
                        }
                    }
                }
            }
        }
    }

    HorizontalHeaderView {
        id: horizontalHeaderView
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left: customPlot.right

        syncView: t_tableView_2

        interactive: false  //禁用拖动

        delegate: Rectangle {
            implicitWidth: 150; implicitHeight: 40;
            color: "#16BAAA";
            border.width: 1
            border.color: "#FFFFFF"

            Text {
                text: tablemodel_2.columns[index].display
                color: "#FFFFFF"
                font.bold: true
                font.pixelSize: 18
                anchors.centerIn: parent
            }
        }
    }

}
